<template>
    <div class="check-list">
        <CheckItem :show.sync="checkItemModal" :data="checkItem" @save="saveCheckItem" :model="objectModel" :itemID="itemID"></CheckItem>
        <ItemDetail :loading="tableLoading" :show.sync="showModal" :value="item" title="Edit Item" :id="itemID" @submit="confirmSubmit"
                    :action="action" :height="600"></ItemDetail>
        <div class="row">
            <div class="col-md-12 p-0">
                <filter-form v-if="filters.length" :columns="filters" @submit="submit"></filter-form>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 bg-white p-0 m-0">
                <item-table title="Check List" :columns="defaultColumns" :data="data" :loading="tableLoading"
                            :page="page" :pageSize="pageSize" @sort="sort" :total="total" :model="model"
                            isAdd @add="addItem"
                >

                    <template slot="is_template" slot-scope="props">
                        <span class="label label-primary" v-if="props.item.is_template">YES</span>
                        <span class="label label-danger" v-else>
                            NO
                        </span>
                    </template>

                    <template slot="is_completed" slot-scope="props">
                        <span class="label label-primary" v-if="props.item.is_completed">YES</span>
                        <span class="label label-danger" v-else>
                            NO
                        </span>
                    </template>

                    <template slot="completion_percent" slot-scope="props">
                        <span class="label label-info">{{props.item.completion_percent + '%'}}</span>
                    </template>

                    <template slot="actions" slot-scope="props">
                        <button v-if="props.item.object_id" type="button" class="btn btn-info btn-outline btn-circle btn-md m-r-5"
                                @click="_editItem(props)">
                            <i class="fif fif-edit"></i>
                        </button>

                        <button type="button" class="btn btn-primary btn-outline btn-circle btn-md m-r-5"
                                @click="_checkList(props)">
                            <i class="fif fif-check_list-border"></i>
                        </button>

                        <button type="button" class="btn btn-danger btn-outline btn-circle btn-md m-r-5"
                                @click="deleteItem(props)">
                            <i class="fif fif-delete"></i>
                        </button>
                    </template>
                </item-table>
                <v-paginate :pageCount="pageCount" :page="page" @change="changePage"></v-paginate>
            </div>
        </div>
    </div>
</template>

<script>
    import {lifeHookMixin, itemMixin, checkListMixin} from "@/mixins/item";
    import vPaginate from '@/components/widgets/Pagination'
    import ItemTable from '@/components/widgets/ItemTable'
    import ItemDetail from '@/components/widgets/ItemDetail'
    import FilterForm from '@/components/widgets/FilterForm'
    import CheckItem from '@/components/widgets/CheckItem'
    import columns from '@/config/columns'
    import {searchModel, updateModel, addModel} from "@/api/model";
    import {l2o} from '@/utils'

    export default {
        name: "CheckList",
        components: {vPaginate, ItemTable, FilterForm, ItemDetail, CheckItem},
        mixins: [lifeHookMixin, itemMixin, checkListMixin],
        data() {
            return {
                currentCheckItem: null,
                orderBy: '-id',
                objectModel: null,
                checkItem: {},
                opt: {
                    is_template: true
                }
            }
        },
        methods: {
            _editItem(props) {
                let newProps = {}
                newProps.item = {id: props.item.object_id}
                this.currentCheckItem = props.item
                this.editItem(newProps, props.item.model_name, columns[props.item.model_name])
            },
            _checkList(props) {
                if (props.item.object_id) {
                    let newProps = {}
                    newProps.item = {id: props.item.object_id}
                    this.objectModel = props.item.model_name
                    this.checkList(newProps, props.item.model_name)
                } else {
                    this.checkItem = props.item
                    this.objectModel = props.item.model_name
                    this.itemID = null
                    this.checkItemModal = true
                }

            },
            confirmSubmit(action, value) {
                let attr = l2o(value, 'key')
                // 添加
                if (action === 'add') {
                    attr.object_id = null
                    attr.is_template = true
                    addModel(this.model, attr).then(res => {
                        if (res.data.id) {
                            this.tableLoading = false
                            this.showModal = false
                            this.fetch()
                            searchModel('CheckList', {
                                page_size: 50,
                                search_keys: {
                                    id : res.data.id
                                }
                            }).then( res => {
                                if (res.data.list.length) {
                                    this.checkItem = res.data.list[0]
                                    this.checkItemModal = true
                                }
                            } )
                        }
                    }).catch(e => {
                        this.tableLoading = false
                    })
                } else {
                    // 更新
                    if (attr && this.origin) {
                        for (let key in attr) {
                            if (key === 'gentime' &&　this.origin[key] && attr[key] &&
                                this.origin[key].split(' ')[0] === attr[key].split(' ')[0]) {
                                delete attr[key]
                            }
                            else if (this.origin[key] === attr[key] && action === 'edit') {
                                delete attr[key]
                            } else if (key === 'password' && attr[key] === '') {
                                delete attr[key]
                            }
                        }
                    }
                    this.tableLoading = true
                    updateModel(this.currentCheckItem.model_name, this.itemID, attr).then(res => {
                        this.tableLoading = false
                        swal("success", "", "success")
                    }).catch(e => {
                        this.tableLoading = false
                    })
                }

            }
        },
    }
</script>

<style scoped>

</style>